<template>
	<view class="main-content">
		<scroll-view scroll-y="true" class="list-box form-data">
			<view class="form-item-vertical" v-for="tem,i in questionnaireValue" :key="i">
				<view class="label">{{tem.contentTitle}}</view>
				<view class="upload-box">
					<radio-group @change="changeRadio($event, i)" class="radio-box">
						<label v-for="item in typeArr" :key="item.value" class="raio-item">
							<radio style="transform:scale(0.7)" color="#007aff" activeBackgroundColor="#007aff"
								:value="item.value" :checked="item.value==FormData.topic1" />{{item.text}}
						</label>
					</radio-group>
				</view>
			</view>
			<view class="form-item-vertical">
				<view class="label"><span class="required"></span>姓名</view>
				<view class="upload-box">
					<input type="text" placeholder-style="color:#e1e1e1;font-size: 26rpx" placeholder="请输入姓名"
						v-model="FormData.userName" />
				</view>
			</view>
			<view class="form-item-vertical">
				<view class="label"><span class="required"></span>手机号</view>
				<view class="upload-box">
					<input type="text" placeholder="请输入手机号" placeholder-style="color:#e1e1e1;font-size: 26rpx"
						v-model="FormData.phone" />
				</view>
			</view>
			<view class="form-item-vertical">
				<view class="label"><span class="required">*</span>单位类型</view>
				<view class="upload-box">
					<!-- multiSelector -->
					<picker  mode="selector" :value="index" @change="bindPickerChange" :range="array">
					<!-- <input :disabled="true" class="time_value" :value="timeNow" placeholder="设定订单要求的提货时间" />  无效-->
						<view>
							<text class="time_value" v-if="index">{{array[index]}}</text>
							<text class="time_value" v-else style="opacity: 0.8;">请选择类型</text>
						</view>
					</picker>

					<!-- <picker mode="selector" :value="index" :range="array" @change="bindPickerChange"> -->
					<!-- </picker> -->
				</view>
			</view>
		</scroll-view>
		<you-bottom-btn :btnConfig="bottomBtnConfig" @formSubmit="formSubmit" @testReport="testReport">
		</you-bottom-btn>
	</view>
</template>

<script>
	import Home from '@/api/home.js'
	export default {
		data() {
			return {
				FormData: {
					userName: '',
					phone: '',
				},
				typeArr: [{
						value: 1,
						text: '是',
					},
					{
						value: 2,
						text: '否',
					},
				],
				identityArr: [{
						value: '0',
						text: '先生',
					},
					{
						value: '1',
						text: '女士',
					},
				],
				scrollHeight: '',
				bottomBtnConfig: [{
					text: '提交',
					class: 'confirm',
					funcName: 'formSubmit'
				}],
				questionnaireValue: [],
				questionId: "",
				questionTitle: "",
				array: [],
				typeList: [],
				index: null,
			}
		},
		onLoad() {
			this.scrollHeight = this.$store.getters.heightData.noTabMainHeight - 74 + 'px';
			this.getCompanyTemplate();
			this.getUnitTypeList()
		},
		methods: {
			showPicker() {
				uni.showPicker({})
			},
			bindPickerChange(e) {
				let item = this.typeList.filter(item => item.dictLabel == this.array[e.detail.value])
				this.FormData.entType = item[0].dictValue
				this.index = e.detail.value
			},
			formSubmit() {
				// this.$refs.masterEnterForm.validate().then(res => {
				// 	console.log('表单数据信息：', res);
				// }).catch(err => {
				// 	console.log('表单错误信息：', err);
				// })
				console.log(this.FormData);
				if(!this.FormData.entType) {
					uni.showToast({
						title:'企业类型不能为空',
						icon: 'none'
					})
					return
				}
				Home.addMaintainApply({
					...this.FormData,
					title: this.questionTitle,
					id: this.questionId,
					wbQuestionTextList: this.questionnaireValue
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							icon: "none",
							title: "申请成功"
						})
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/home'
							})
						}, 1000)
					}
				})
			},
			// 请求维保公司模板
			getCompanyTemplate() {
				Home.getTitleTemplate().then(res => {
					let obj = res.data || {};
					console.log(obj);
					this.questionId = obj.id;
					this.questionTitle = obj.title;
					let list = obj.wbQuestionTextTemplateList || [];
					this.questionnaireValue = list.map(ele => {
						return {
							contentTitle: ele.contentTitle,
							id: ele.id,
							yesOrNo: ''
						}
					})
				})
			},
			changeRadio(e, i) {
				console.log(e, i)
				let {
					contentTitle,
					id
				} = this.questionnaireValue[i];
				this.$set(this.questionnaireValue, i, {
					yesOrNo: e.detail.value - 0,
					contentTitle,
					id
				})
			},
			// 获取单位类型
			getUnitTypeList() {
				Home.entType().then(res => {
					if (res.code == 200) {
						this.array = res.data.map(item => item.dictLabel)
						this.typeList = res.data
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.main-content {
		width: 100%;
		height: 100%;
		padding: 20rpx 30rpx;

		.list-box {
			padding: 0 20rpx;
			border-radius: 16rpx;
			background: #ffffff;
			margin-bottom: 20rpx;
			height: 100vh;
			padding-bottom: calc(env(safe-area-inset-bottom) + 84px);

			.form-item-vertical {
				.label {
					font-size: 28rpx;
					color: #666;
				}

				.upload-box {
					width: 100%;
					padding: 30rpx 0;
					border-bottom: 2rpx solid #e6e6e6;
				}

				.radio-box {
					display: flex;

					.raio-item {
						width: 50%;
					}
				}
			}
		}
	}
	.required {
		color: red;
		width: 15rpx;
		height: 100%;
		display: inline-block;
	}
</style>